<script lang="ts" setup>
import { useStore } from '@/stores';
import { GameItem } from '@/typings';
import { computed, ref } from 'vue';
import GameCard from './components/GameCard.vue';
import GameDialog from './components/GameDialog.vue';
import Header from './components/Header.vue';
import Layout from './components/Layout.vue';

const store = useStore();

const itemDetail = ref<GameItem | null>(null);
const searchData = ref('');
const list = computed(() =>
  searchData.value
    ? store.gameList.filter((i) => i.name.includes(searchData.value))
    : store.gameList,
);

const handleCollect = (index: string, flag: boolean) => {
  store.changeCollect('game', index, flag);
};

const handleSearch = (e) => {
  searchData.value = e;
};
</script>

<template>
  <Layout>
    <template #header>
      <Header title="游戏" @search="handleSearch" />
    </template>
    <div class="container">
      <GameCard
        v-for="item of list"
        :key="item.index"
        :data="item"
        @collect="handleCollect"
        @detail="itemDetail = item"
      />
      <el-empty v-if="!list.length" description="暂无数据" />
    </div>
  </Layout>
  <GameDialog v-if="itemDetail" :data="itemDetail" @closed="itemDetail = null" />
</template>

<style lang="scss" scoped></style>
